<template>
  <div class="test-paper-box" v-loading="loading">
    <div
      class="text-paper-list"
      v-for="(item,index) in questionData.list"
      :key="index"
      :id="item.QuestionId"
    >
      <div class="clearfix">
        <div class="test-paper-title" v-if="questionData.isShowQuesType">{{item.QuestionName}}</div>
        <div
          class="fr"
          style="margin-top: 40px;margin-right: 20px;"
          v-if="mode == 'check' && questionData.isShowScore && item.IsAssignmented"
        >
          <a-input-number
            style="color: #f00;"
            :disabled=" mode == 'check'"
            :min="0"
            :max="item.Score"
            v-model="item.GetScore"
          />
          <span style="margin-left: 5px;font-size: 16px;">分</span>
        </div>
      </div>
      <div class="test-paper-num">
        <span class="que-key">{{index+1}}</span>
        /{{questionData.list.length}}
        <span
          class="que-total"
          v-if="questionData.isShowBaseScore"
        >({{item.Score}}分)</span>
      </div>
      <div class="test-question-title1" v-if="item.quesFileList">
        <div v-html="item.Title"></div>
      </div>
      <div class="test-question-title" v-else>
        <div v-html="item.Title"></div>
      </div>
      <addUploads v-if="item.quesFileList" :quesFileList="item.quesFileList" :mode="false"></addUploads>
      <div class="question-option-box">
        <!-- 单选题 -->
        <div v-if="item.QuestionType == 1 && itemShow">
          <a-radio-group
            style="width: 100%;"
            v-model="answerList[index]"
            :disabled=" mode == 'check'"
            @change="onChange(item,index)"
          >
            <a-radio
              class="option-lis"
              style="display: block;lineHeight: 30px;"
              v-for="(value,key) in item.AnswerList"
              :value="value.SortOrder"
              :key="key"
            >
              {{Alphabet[key]}}.
              <span v-html="value.Content" class="option-lis-title"></span>
            </a-radio>
          </a-radio-group>
        </div>
        <div v-if="item.QuestionType == 1 && !itemShow">
          <a-radio-group
            class="radio-check-disabled"
            style="width: 100%;"
            :value="answerAll(allAnswerList[index],index)"
            :disabled="true"
            @change="onChange(item,index)"
          >
            <a-radio
              class="option-lis"
              style="display: block;lineHeight: 30px;"
              v-for="(value,key) in item.AnswerList"
              :value="value.SortOrder"
              :key="key"
            >
              {{Alphabet[key]}}.
              <span v-html="value.Content" class="option-lis-title"></span>
            </a-radio>
          </a-radio-group>
        </div>
        <!-- 多选题 -->
        <div v-if="item.QuestionType == 2 && itemShow">
          <a-checkbox-group
            :disabled=" mode == 'check'"
            v-model="answerList[index]"
            @change="onChange(item,index)"
          >
            <a-checkbox
              class="option-lis"
              style="display: block;lineHeight: 30px;"
              v-for="(value,key) in item.AnswerList"
              :value="value.SortOrder"
              :key="key"
            >
              {{Alphabet[key]}}.
              <span v-html="value.Content" class="option-lis-title"></span>
            </a-checkbox>
          </a-checkbox-group>
        </div>
        <div v-if="item.QuestionType == 2 && !itemShow">
          <a-checkbox-group
            class="radio-check-disabled"
            :disabled="true"
            :value="answerAll(allAnswerList[index],index)"
            @change="onChange(item,index)"
          >
            <a-checkbox
              class="option-lis"
              style="display: block;lineHeight: 30px;"
              v-for="(value,key) in item.AnswerList"
              :value="value.SortOrder"
              :key="key"
            >
              {{Alphabet[key]}}.
              <span v-html="value.Content" class="option-lis-title"></span>
            </a-checkbox>
          </a-checkbox-group>
        </div>
        <!-- 判断题 -->
        <div v-if="item.QuestionType == 3 && itemShow">
          <a-radio-group
            style="width: 100%;"
            v-model="answerList[index]"
            :disabled=" mode == 'check'"
            @change="onChange(item,index)"
          >
            <a-radio class="option-lis" style="display: block;lineHeight: 30px;" :value="1">
              {{Alphabet[0]}}.
              <span>正确</span>
            </a-radio>
            <a-radio class="option-lis" style="display: block;lineHeight: 30px;" :value="0">
              {{Alphabet[1]}}.
              <span>错误</span>
            </a-radio>
          </a-radio-group>
        </div>
        <div v-if="item.QuestionType == 3 && !itemShow">
          <a-radio-group
            style="width: 100%;"
            :value="answerAll(allAnswerList[index],index)"
            :disabled="true"
            @change="onChange(item,index)"
          >
            <a-radio class="option-lis" style="display: block;lineHeight: 30px;" :value="1">
              {{Alphabet[0]}}.
              <span>正确</span>
            </a-radio>
            <a-radio class="option-lis" style="display: block;lineHeight: 30px;" :value="0">
              {{Alphabet[1]}}.
              <span>错误</span>
            </a-radio>
          </a-radio-group>
        </div>
        <!-- 填空题(客观) -->
        <div v-if="item.QuestionType == 4">
          <exerciseGuest :mode="mode" :data="item" :index="index"></exerciseGuest>
        </div>
        <!-- 填空题(主观) -->
        <div v-if="item.QuestionType == 5">
          <exercise :mode="mode" :data="item" :index="index"></exercise>
        </div>
        <!-- 问答题 -->
        <div v-if="item.QuestionType == 6">
          <a-textarea
            v-model="item.StuAnswer"
            :disabled=" mode == 'check'"
            :index="index"
            placeholder="请输入答案"
            @blur="onChange(item,index)"
            :auto-size="{minRows: 2, maxRows: 200}"
            style="margin-bottom: 5px;"
          />
          <a-button type="primary" @click="onChange(item,index)" style="margin-top: 10px;" v-if="mode != 'check'">保存</a-button>
          <uploads
            v-if=" (item.fileList&&item.fileList.length>0 || uploadType === 1) "
            :examId="questionData.examId"
            :workExamStuId="questionData.workExamStuId"
            :index="index"
            :data="item"
            :mode="uploadType === 1 ? true : false"
          ></uploads>
        </div>
        <!-- 匹配题 -->
        <div v-if="item.QuestionType == 7">
          <matching :mode="mode" :data="item" :index="index"></matching>
        </div>
        <!-- 阅读理解 完形填空 视听题 -->
        <div
          v-if="item.QuestionType == 8 || item.QuestionType == 9 || item.QuestionType == 11 || item.QuestionType == 12 || item.QuestionType == 13"
        >
          <childQuestion
            ref="childBox"
            :mode="mode"
            :itemShow="itemShow"
            :uploadType="uploadType"
            :examId="questionData.examId"
            :allAnswerList="allAnswerList[index].subQuesList"
            :workExamStuId="questionData.workExamStuId"
            :isShowQuesType="questionData.isShowQuesType"
            :isShowBaseScore="questionData.isShowBaseScore"
            :isShowAnswer="questionData.isShowAnswer"
            :isShowScore="questionData.isShowScore"
            :data="item"
            :index="index"
            :answerList="answerList[index]"
          ></childQuestion>
          <!--  -->
        </div>
      </div>
      <div v-if="mode == 'check'">
        <div
          class="question-option-box"
          v-if="item.QuestionType != 8 && item.QuestionType != 9 && item.QuestionType != 11 && item.QuestionType != 12 && item.QuestionType != 13 && questionData.isShowAnswer"
        >
          <div class="question-label">参考答案：</div>
          <div class="question-input" v-if="item.QuestionType == 4">
            <div
              v-for="(item1,num) in setAnswerList(item.AnswerList)"
              :key="num"
              style="display:flex"
            >
              填空{{num+1}}：
              <div class="question-input">
                <span style="color: #0177d5;">
                  <label v-if="!item1.Order[0].CaseSensitive">不</label>严格区分大小写
                </span>
                <div v-for="(child,key) in item1.Order" :key="key">
                  {{key+1}}、{{child.Content}}
                  <span style="margin-left: 10px;">({{child.Percent}}%)</span>
                </div>
              </div>
            </div>
          </div>
          <div class="question-input" v-else-if="item.QuestionType == 5">
            <div v-for="(value,key) in item.AnswerList" :key="key">填空{{key+1}}：{{value.Content}}</div>
          </div>
          <div class="question-input" v-else-if="item.QuestionType == 6">
            <span v-html="item.Answer"></span>
          </div>
          <div class="question-input" v-else>{{item | getSetAnswer}}</div>
        </div>
        <div class="question-option-box" v-if="item.QuestionType == 4 && questionData.isShowAnswer">
          <div class="question-label">顺序匹配：</div>
          <span v-if="!item.IsOrderMatching">否</span>
          <span v-else>是</span>
        </div>
        <div class="question-option-box" v-if="questionData.isShowAnalysis">
          <div class="question-label">答案解析：</div>
          <div class="question-input">
            <span v-if="item.ResultAnalysis" v-html="item.ResultAnalysis"></span>
            <span v-else>暂无答案解析</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import addUploads from '@/components/addTi/addUpload/index.vue';
import uploads from '@/components/addTi/upload/index.vue';
import matching from './matching.vue';
import exercise from './exercise.vue';
import exerciseGuest from './exerciseGuest.vue';
import childQuestion from './childQuestion.vue';
export default {
  data() {
    return {
      Alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      loading: false,
      answerList: [],
      answer: '',
      itemShow: true,
      nullAnswer: ''
    };
  },
  components: {
    matching,
    exercise,
    exerciseGuest,
    childQuestion,
    addUploads,
    uploads
  },
  props: {
    questionData: {
      type: Object,
      default: () => {}
    },
    allAnswerList: {
      type: Array,
      default: () => []
    },
    uploadType: {
      type: Number,
      default: 0
    },
    mode: {
      type: String,
      default: ''
    }
  },
  filters: {
    questionType(e) {
      if (e == 1) {
        return '单选题';
      } else if (e == 2) {
        return '多选题';
      } else if (e == 3) {
        return '判断题';
      } else if (e == 4) {
        return '填空题(客观)';
      } else if (e == 5) {
        return '填空题(主观)';
      } else if (e == 6) {
        return '问答题';
      } else if (e == 7) {
        return '匹配题';
      } else if (e == 8 || e == 12) {
        return '阅读理解';
      } else if (e == 9 || e == 13) {
        return '完形填空';
      } else if (e == 11) {
        return '视听题(主观)';
      }
    },
    getSetAnswer(e) {
      var Alphabet = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ];
      if (e.QuestionType == 1) {
        return Alphabet[Number(e.Answer)];
      } else if (e.QuestionType == 3) {
        return e.Answer == '1' ? '正确' : '错误';
      } else if (e.QuestionType == 2 || e.QuestionType == 7) {
        let answer = e.Answer.split(',').map(Number);
        let answertxt = '';
        var min;
        if (e.QuestionType == 2) {
          for (var i = 0; i < answer.length; i++) {
            for (var j = i; j < answer.length; j++) {
              if (answer[i] > answer[j]) {
                min = answer[j];
                answer[j] = answer[i];
                answer[i] = min;
              }
            }
          }
        }
        for (let i = 0; i < answer.length; i++) {
          if (i == 0) {
            answertxt = Alphabet[answer[i]];
          } else {
            answertxt = answertxt + '、' + Alphabet[answer[i]];
          }
        }
        return answertxt;
      } else {
        return '暂无答案';
      }
    }
  },
  mounted() {
    this.setAnswer();
  },
  methods: {
    answerAll(e, index) {
      if (this.questionData.list[index].QuestionType == 1 || this.questionData.list[index].QuestionType == 3) {
        var answer = '';
        // if (e.questionJson || e.questionJson == 0) {
        //   answer = Number(e.questionJson);
        // } else {
        //   console.log('answerAll')
        //   answer = '';
        // }
        return answer
      } else if (this.questionData.list[index].QuestionType == 2) {
        if (e.questionJson == '' || e.questionJson == null) {
          return '';
        } else {
          return e.questionJson.split(',').map(Number);
        }
      }
    },
    setExamAnswer(data) {
      if (this.questionData.list[data.num].QuestionType == 1 || this.questionData.list[data.num].QuestionType == 3) {
        
        if (data.answer || data.answer == 0) {
          this.answerList[data.num] = Number(data.answer);
        } else {
          this.answerList[data.num] = null;
        }
      } else if (this.questionData.list[data.num].QuestionType == 2) {
        if (data.answer == '' || data.answer == null) {
          this.answerList[data.num] = '';
        } else {
          this.answerList[data.num] = data.answer.split(',').map(Number);
        }
      } else if (
        this.questionData.list[data.num].QuestionType == 8 ||
        this.questionData.list[data.num].QuestionType == 9 ||
        this.questionData.list[data.num].QuestionType == 11 ||
        this.questionData.list[data.num].QuestionType == 12 ||
        this.questionData.list[data.num].QuestionType == 13
      ) {
        if (this.questionData.list[data.num].SubQuesList[data.childnum].SubQuestionType == 1 || this.questionData.list[data.num].SubQuesList[data.childnum].SubQuestionType == 3) {
           
           if (data.answer || data.answer == 0) {
             this.answerList[data.num][data.childnum] = Number(data.answer);
           } else {
             this.answerList[data.num][data.childnum] = null;
           }
        } else if (this.questionData.list[data.num].SubQuesList[data.childnum].SubQuestionType == 2) {
          if (data.answer == '' || data.answer == null) {
            this.answerList[data.num][data.childnum] = '';
          } else {
            this.answerList[data.num][data.childnum] = data.answer.split(',').map(Number);
          }
        }
      }
      this.itemShow = true;
    },
    onChange(e, index, num) {
      this.answer = '';
      if (e.QuestionType == 1 || e.QuestionType == 3) {
        e.StuAnswer = String(this.answerList[index]);
      } else if (e.QuestionType == 2) {
        e.StuAnswer = this.answerList[index].toString();
      }
      this.itemShow = false;
      if (num || num == 0) {
        this.answerList[index][num] = '';
      } else {
        this.answerList[index] = '';
      }
      this.$parent.getStuAnswer(e, index, num);
    },
    setAnswerList(e) {
      var answer = [];
      let num = -1;
      for (let index = 0; index < e.length; index++) {
        let key = e[index].SortOrder;
        if (num < key) {
          num = key;
          var list = {
            Order: [
              {
                SortOrder: e[index].SortOrder,
                Content: e[index].Content,
                Percent: e[index].Percent,
                CaseSensitive: e[index].CaseSensitive
              }
            ]
          };
          answer.push(list);
        } else {
          let lis = {
            SortOrder: e[index].SortOrder,
            Content: e[index].Content,
            Percent: e[index].Percent,
            CaseSensitive: e[index].CaseSensitive
          };
          answer[key].Order.push(lis);
        }
      }
      return answer;
    },
    setAnswer() {
      this.loading = true;
      for (let i = 0; i < this.questionData.list.length; i++) {
        let answer = '';
        if (this.questionData.list[i].QuestionType == 1 || this.questionData.list[i].QuestionType == 3) {
          if (this.questionData.list[i].StuAnswer == '' || this.questionData.list[i].StuAnswer == null) {
            answer = '';
          } else {
            answer = Number(this.questionData.list[i].StuAnswer);
          }
        } else if (this.questionData.list[i].QuestionType == 2) {
          if (this.questionData.list[i].StuAnswer == '' || this.questionData.list[i].StuAnswer == null) {
            answer = '';
          } else {
            answer = this.questionData.list[i].StuAnswer.split(',').map(Number);
          }
        } else if (
          this.questionData.list[i].QuestionType == 8 ||
          this.questionData.list[i].QuestionType == 9 ||
          this.questionData.list[i].QuestionType == 11 ||
          this.questionData.list[i].QuestionType == 12 ||
          this.questionData.list[i].QuestionType == 13
        ) {
          answer = [];
          var childQuestion = this.questionData.list[i].SubQuesList;
          for (let key = 0; key < childQuestion.length; key++) {
            let childanswer = '';
            if (childQuestion[key].SubQuestionType == 1 || childQuestion[key].SubQuestionType == 3) {
              if (childQuestion[key].StuDo?.Answer == '' || childQuestion[key].StuDo?.Answer == null) {
                childanswer = '';
              } else {
                childanswer = Number(childQuestion[key].StuDo.Answer);
              }
            } else if (childQuestion[key].SubQuestionType == 2) {
              if (childQuestion[key].StuDo?.Answer == '' || childQuestion[key].StuDo?.Answer == null) {
                childanswer = [];
              } else {
                childanswer = childQuestion[key].StuDo.Answer.split(',').map(Number);
              }
            }
            answer.push(childanswer);
          }
        }
        this.answerList.push(answer);
      }
      this.loading = false;
    }
  }
};
</script>

<style>
</style>